<template>
	<view class="list" >
				<block v-if="dataList.length > 0">
					<view class="listBox me-fx-row" v-for="(item, index) in dataList" :key="item.id" >
							<view class="me-fx-row leftWidth" @click="dataListBtn(item.user.id,item.user.username)">
								<image :src="item.user.avatar" mode="" class="imagePic" ></image>
								<view class="listRight" >
									<view class="me-fx-row-sa-c">
										<view class="me-fx-row-start-c listRightHL">
											<text class="nickName me-text-beyond">{{item.user.username}}</text>
											<text class="blurC" v-for="(items, index) in item.user.certify_tag_id_collection">{{items}}</text>
											<image src="../../static/img/vip.png" mode="" ></image>
										</view>
									</view>
									<view class="me-fx-row-start-c listRightCenter">
										<text>{{item.user.city}}</text>
										<text>{{item.user.userInfo.age}}岁</text>
										<text>{{item.user.userInfo.job_id}}</text>
									</view>
									<view class="listRightBottom me-fx-row-start-c">
										<!-- <view class="adressBox bottomBox me-fx-row-start-c">
											<image src="../../static/img/adress.png" mode="" class="adress"></image>
											<view class=""> 
												325.6Km
											</view>
										</view> -->
										<view class="bottomBox" v-if="item.last_online_time">
											{{item.last_online_time}}
										</view>
									</view>
								</view>
							</view>
						<image src="../../static/img/slh.png" mode="" class="classify" @click="classifyBtn" :data-id='item.user.id'></image>
					</view>
				</block>
				<view class="nohave" v-if="nohaveShow">
					<image src="../../static/img/newimg/xx.png" mode=""></image>
					暂时没有更多数据啦~
				</view>
				<!-- 弹框 -->
				<view class="Covering" v-if="classifyShow">
					<view class="bottomFiex">
						<view class="FiexTop">
							<view class="" @click="collectBtn(1)" :class="[Index == 1 ? 'active':'']">
								取消收藏
							</view>
							<!-- <view class="bottomBorder" @click="blacklistBtn(1)" :class="[Index2 == 1 ? 'active':'']">
								拉黑
							</view> -->
						</view>
						<view class="FiexBottom" @click="cancelBtn">
							取消
						</view>
					</view>
				</view>
			</view>
</template>

<script>
	import {getDateDiff} from '@/utils/utils'
	export default {
		data() {
			return {
				dataList:[],
				last_page:1,
				page:1,
				classifyShow:false,
				Index: -1,
				Index2: -1,
				dataListID:'',
				nohaveShow:false
			}
		},
		created(){
			this.indexList(this.page)
		},
		methods: {
			cancelBtn() {
				this.classifyShow = false
			},
			collectBtn(index) {
				this.Index = index
				this.$u.delete('/like/lover/delete', {
						id: this.dataListID
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '取消成功',
								duration: 1000,
								icon: 'none'
							})
							this.classifyShow = false
							this.Index = -1
							this.indexList(this.page)
						} else {
							this.Index = -1
							this.classifyShow = false
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			blacklistBtn(index) {
				this.Index2 = index
				this.$u.post('/blacklist/add', {
						id: this.dataListID
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '拉黑成功',
								duration: 1000,
								icon: 'none'
							})
							this.classifyShow = false
							this.Index2 = -1
						} else {
							this.Index2 = -1
							this.classifyShow = false
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			indexList(page){
				this.$u.get('/like/list/' + page).then(res => {
						if (res) {
							if(res.data.list.data.length <= 0){
								this.nohaveShow =true
								}
							this.last_page=res.data.list.last_page
							if(res.data.list.current_page == 1){
								this.dataList = res.data.list.data
							}else{
								this.dataList =this.dataList.concat(res.data.list.data) 
							}
							for(let i =0; i<res.data.list.data.length;i++){
								if(res.data.list.data[i].last_online_time){
									this.dataList[i].last_online_time = getDateDiff(res.data.list.data[i].last_online_time)
								}
							}
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			dataListBtn(id, name) {
				uni.setStorage({
					key: 'userId',
					data: id,
				});
				uni.navigateTo({
					url: '../station/headDetails?id=' + id + '&name=' + name
				})
			},
			classifyBtn(e) {
				console.log(e.currentTarget.dataset.id)
				this.dataListID = e.currentTarget.dataset.id
				this.classifyShow = true
			},
			dataListBtn2(id, name) {
				uni.setStorage({
					key: 'userId',
					data: id,
				});
				uni.navigateTo({
					url: '../station/headDetails?id=' + id + '&name=' + name
				})
			},
			onReachBottom(){//uniapp 监听下拉加载生命周期
			if(this.page>=this.last_page){
				uni.showToast({
					title: '没有更多数据了',
					duration: 1000,
					icon: 'none'
				})
				return
			}
			this.page++
			this.indexList(this.page)
			},
		}
	}
</script>

<style>
	.nohave{
		padding: 20rpx;
		text-align: center;
	}
	.nohave image{
			width: 100%;
			height: 537rpx;
			display: block;
	}
	.list {
		padding: 16rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;
		background-color: white;
	}
	
	.listBox {
		margin-top: 20rpx;
	}
	
	.listBox .imagePic {
		display: block;
		width: 180rpx;
		height: 180rpx;
		border-radius: 6rpx;
	}
	
	.listBox .listRight {
		margin-left: 24rpx;
		width: 70%;
	}
	
	.listRightHL {
		width: 100%;
	}
	
	.listRightHL text,
	.listRightHL image {
		margin-right: 26rpx;
		 width: 20%; 
	}
	
	.listRightHL image {
		width: 50rpx;
		height: 25rpx;
		display: block;
	}
	
	.listRightCenter text {
		/* width:102rpx; */
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: rgba(230, 229, 255, 1);
		border-radius: 20rpx;
		color: rgba(147, 147, 147, 1);
		font-size: 28rpx;
		padding: 0 10rpx;
		margin-top: 30rpx;
		margin-right: 19rpx;
	}
	
	.listRightBottom .bottomBox {
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: rgba(229, 229, 229, 1);
		border-radius: 20px;
		color: rgba(147, 147, 147, 1);
		font-size: 28rpx;
		margin-top: 22rpx;
		margin-right: 20rpx;
		padding: 0 20rpx;
	}
	
	.nickName {
		font-weight: bold;
		color: rgba(68, 68, 68, 1);
	}
	
	.blurC {
		width: 60rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		background: rgba(122, 42, 255, 1);
		border-radius: 15rpx;
		font-size: 22rpx;
		color: rgba(255, 254, 254, 1);
	}
	
	.classify {
		width: 36rpx;
		height: 8rpx;
	}
	
	.adressBox .adress {
		width: 15rpx;
		height: 18rpx;
	}
	
	.bottomFiex {
		width: 96%;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		font-size: 36rpx;
	}
	
	.bottomFiex .FiexTop {
		background-color: white;
		border-radius: 6rpx;
	}
	
	.FiexTop view {
		height: 110rpx;
		line-height: 110rpx;
	}
	
	.FiexBottom {
		background-color: white;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 6rpx;
		margin-top: 30rpx;
	}
	
	.bottomBorder {
		border-top: 1rpx solid rgba(236, 235, 235, 1);
		;
	}
	.leftWidth{
		width: 100%;
	}
	.bottomFiex {
		width: 96%;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		font-size: 36rpx;
	}
	
	.bottomFiex .FiexTop {
		background-color: white;
		border-radius: 6rpx;
	}
	
	.FiexTop view {
		height: 110rpx;
		line-height: 110rpx;
	}
	
	.FiexBottom {
		background-color: white;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 6rpx;
		margin-top: 30rpx;
	}
	
	.bottomBorder {
		border-top: 1rpx solid rgba(236, 235, 235, 1);
	}
	
	.nohave {
		padding: 20rpx;
	}
	
	.leftWidth {
		width: 100%;
	}
	
	.indexPage /deep/.uni-navbar--fixed {
		width: 100%;
	}
</style>
